<template>
  <div>
    <el-menu router background-color="#f2efe8" active-text-color="#000" default-active="/index" unique-opened>
      <el-menu-item index="/index">
        <template slot="title">
          <i class="iconfont icon-luntan4"></i>
          <span>首页</span>
        </template>
      </el-menu-item>

      <el-submenu index="1">
        <template slot="title">
          <i class="iconfont icon-w_xinwen"></i>
          <span>时事信息</span>
        </template>
        <el-menu-item-group>
          <el-menu-item index="/NewsLists">
            <i class="iconfont icon-ziyuan"></i>
            <span>热点新闻</span></el-menu-item
          >
          <el-menu-item index="xiaozhao"
            ><i class="iconfont icon-xiaozhao"></i>
            <span>校园招聘</span></el-menu-item
          >
        </el-menu-item-group>
      </el-submenu>
      <el-submenu index="2">
        <template slot="title">
          <i class="iconfont icon-tiaozaoshichang"></i>
          <span>跳蚤市场</span>
        </template>
        <el-menu-item-group>
          <el-menu-item index="/market"
            ><i class="iconfont icon-zhixing"></i>
            <span>商品交易</span></el-menu-item
          >
          <el-menu-item index="/bag"
            ><i class="iconfont icon-wodebeibao1"></i>
            <span>我的背包</span></el-menu-item
          >
        </el-menu-item-group>
      </el-submenu>

      <el-submenu index="3">
        <template slot="title">
          <i class="iconfont icon-zuheguishu"></i>
          <span>物归原主</span>
        </template>
        <el-menu-item-group>
          <el-menu-item index="/find"
            ><i class="iconfont icon-shiwuzhaoling"></i>
            <span>失物招领</span></el-menu-item
          >
          <el-menu-item index="/lost"
            ><i class="iconfont icon-xunwuqishixuanzhong"></i>
            <span>寻物启事</span></el-menu-item
          >
        </el-menu-item-group>
      </el-submenu>

      <el-submenu index="4">
        <template slot="title">
          <i class="iconfont icon-xiaoyuanguanli"></i>
          <span>校园墙</span>
        </template>
        <el-menu-item-group>
          <el-menu-item index="biaobai"
            ><i class="iconfont icon-24gl-playlistHeart2"></i>
            <span>表白墙</span></el-menu-item
          >
          <el-menu-item index="tucao"
            ><i class="iconfont icon-tucaofankui"></i>
            <span>吐槽墙</span></el-menu-item
          >
        </el-menu-item-group>
      </el-submenu>

      <el-menu-item index="tiewen">
        <i class="iconfont icon-wodetiezi1"></i> <span>贴文</span></el-menu-item
      >
    </el-menu>
  </div>
</template>

<script>
export default {
  methods: {
    myClick() {
      alert("点击成功");
    },
  },
};
</script>

<style scoped>
.el-menu-item.is-active {
  width: 98%;
  margin: 5px auto;
  border-radius: 5px;
  background-color: #e3d6c6 !important;
}
/* .el-menu-item:hover {
  width: 95%;
  margin: 5px auto;
  border-radius: 5px;
  background-color: #e3d6c6 !important;
} */
/* .el-submenu:hover {
  width: 95%;
  margin: 5px auto;
  border-radius: 5px;
  background-color: #e3d6c6 !important;
} */
</style>
